<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        background-color: #087;
      }
    </style>
  </head>
  <body>
    <div class="box">123</div>

    <script>
      const box = document.querySelector('box')

      //预防可能出现的报错阻塞页面的渲染，后续代码的执行，try的代码块中放有可能出现报错的代码，catch会捕获错误
      //   try {
      //     debugger
      //     box.addEventListener('click', function () {
      //       console.log(this)
      //     })
      //   } catch (error) {
      //     console.dir(error)
      //     console.log(error)
      //   } finally {
      //     console.log(3)
      //   }
      debugger

      box.addEventListener('click', function () {
        console.log(this)
      })

      console.log(1)
      console.log(2)
    </script>
  </body>
</html>
